<template>
  <td>
    <span v-if="!item.showInput"> {{ item.itemname }}</span>

    <input type="text" v-model="item.itemname" v-if="item.showInput" />
  </td>
  <td>
    <span v-if="!item.showInput">
      {{ item.state == 1 ? "完成" : "未完成" }}</span>
    <select v-model="item.state" v-if="item.showInput">
      <option value="0">未完成</option>
      <option value="1">完成</option>
    </select>
  </td>

  <td>
    <button type="button" @click="save(item)">
      {{ item.showInput ? "保存" : "修改" }}
    </button>
    <button type="button" @click="deldata(item.id)">删除</button>
  </td>
</template>

<script setup>
// import {defineEmits} from "vue"
// import { FetchFunc } from "../request/http"
import { edit, del } from "../request/todolist"
const props = defineProps({
  item: {
    type: Object,
    default: () => { }
  }
})

const emit = defineEmits(['reset', 'refresh'])
const save = (itemObj) => {
  emit('reset')
  editData(itemObj)
}



const editData = async (itemObj) => {

  if (itemObj.showInput) {

    itemObj.showInput = false;

    await edit(itemObj)

  } else {

    itemObj.showInput = true;
  }

  //localStorage.setItem("mylist", JSON.stringify(listdata.value));
}


const deldata = async (id) => {
  //console.log(index)

  if (confirm("真的要删除吗?")) {


    const result = await del(id)

    if (result) {

      emit('refresh')
    }


  }
};
</script>

<style lang="scss"></style>